<template>
	<!-- 20230309 下拉或上滑加载数据列表-->
	<view class="list-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			
			<!-- 向下滑动加载的列表插槽 -->
			<slot></slot>

			<!-- 不同状态显示文案 
			 向上加载的列表没有间距 -->
			<view :class="{ 'padding-tb-20': type == 1 }">
				<!-- 加载失败状态 -->
				<view  v-if="status=='hasError'" @tap="load">
					<view class="text-24 text-center text-aa">{{contentText[status]}}</view>
				</view>

				<!-- 加载中状态 -->
				<view v-else-if="status=='loading'">
					<view class="text-30 text-center text-4d">{{contentText[status]}}</view>
				</view>
				
				<!-- 暂无数据状态
					向上加载的列表没有封装nodata状态 -->
				<view v-else-if="status=='nodata'">
					<image class="margin-bottom-20 jc-image width-160 block-center" mode="widthFix" :src="noDataImage" v-if="noDataImage"></image>
					<view class="text-30 text-center text-4d">{{contentText[status]}}</view>
				</view>

				<!-- 加载完成状态 
					向上加载的列表没有加载完成状态的提示语-->
				<view v-else-if="status=='finished' && type == 1">
					<view class="text-24 text-center text-aa">{{contentText[status]}}</view>
				</view>
			</view>

			<!-- 向上滑动加载的列表插槽 -->
			<slot name='up_list'></slot>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 列表状态
			status: {
				type: String,
				default: 'nodata'
			},
			// 暂无数据文案
			noDataText: {
				type: String,
				default: '暂无数据~'
			},
			// 暂无数据图片
			noDataImage: {
				type: String,
				default: ''
			},
			// 加载中文案
			loadingText: {
				type: String,
				default: '加载中...'
			},
			// 加载完成文案
			finishedText: {
				type: String,
				default: '我是有底线的~'
			},
			// 加载失败文案
			hasErrorText: {
				type: String,
				default: '加载失败,点击重新加载'
			},
			// 加载方式 1--向下加载 2--向上加载
			type: {
				type: Number,
				default: 1
			}
		},
		computed: {
			/**
			 * 组合各状态文案
			 */
			contentText() {
				return {
					nodata: this.noDataText,
					loading: this.loadingText,
					finished: this.finishedText,
					hasError: this.hasErrorText
				}
			}
		},

		methods: {
			/**
			 * 加载失败时点击重新加载
			 */
			load() {
				this.$emit('load')
			}
		}
	}
</script>

<style scoped>

</style>
